import QtQuick

ListView {
    id:musicPlayListDetail
    property var thisTheme: p_theme.defaultTheme[p_theme.current]
    property var playListInfo: null
    property int fontSize: 11
    width:parent.width
    height: parent.height

    onPlayListInfoChanged: {
        headerItem.id=playListInfo.id
        headerItem.nameText=playListInfo.name
        headerItem.coverImg=playListInfo.coverImg
        headerItem.descriptionText=playListInfo.description
    }

    function setHeight(children,spacing){
        var h=0;
        for(var i=0;i<children.length;i++)
        {
            if(children[i] instanceof Text){
                h+=children[i].contentHeight
            }else{
                h+=children[i].height
            }
        }
        return h+(children.length-1)*spacing
    }
    header: Item{
        id:header
        property string id: ""
        property string nameText: "歌单名"
        property string coverImg: "qrc:/Images/user.jpg"
        property string descriptionText: "歌单信息"
        width:parent.width-60
        height:children[0].height+50
        anchors.horizontalCenter: parent.horizontalCenter
        Column{
            width:parent.width
            height:setHeight(children,spacing)
            anchors.top: parent.top
            anchors.topMargin: 30
            spacing: 15
            Row{
                width:parent.width
                height:200
                spacing: 15
                Image{
                    id:coverImg
                    width: parent.height
                    height: width
                    source:header.coverImg
                }
                Column{
                    width:parent.width-coverImg.width-parent.spacing
                    height:setHeight(children,spacing)
                    anchors.verticalCenter: coverImg.verticalCenter
                    spacing: 12
                    Text{
                        width:parent.width

                        font.pointSize: musicPlayListDetail.fontSize
                        elide: Text.ElideRight
                        text:"歌单"
                        color:"#FF"+thisTheme.subBackgroundColor
                    }
                    Text{
                        width:parent.width
                        font.pointSize: 20
                        elide: Text.ElideRight
                        text:header.nameText
                        color:thisTheme.fontColor
                    }
                    Text{
                        width:parent.width
                        font.pointSize: musicPlayListDetail.fontSize
                        elide: Text.ElideRight
                        text:header.descriptionText
                        color:thisTheme.fontColor
                    }
                }
            }
            Row{
                width:parent.width
                height: 50
                spacing: 15
                ToolTipButton{
                    width: parent.height
                    height:width
                    source:"qrc:/Images/accountManage.svg"
                    hoverdColor: "#FF"+thisTheme.subBackgroundColor
                    color:"#FF"+thisTheme.subBackgroundColor
                    iconColor:"WHITE"
                    onEntered: {
                        scale=1.1
                    }
                    onExited: {
                        scale=1
                    }
                    Behavior on scale{
                        ScaleAnimator{
                            duration:200
                            easing.type: Easing.InOutQuart
                        }
                    }
                }
                ToolTipButton{
                    width: parent.height
                    height: width
                    source:"qrc:/Images/guestManage.svg"
                    hoverdColor: "#1F"+thisTheme.subBackgroundColor
                    color:"#00000000"
                    iconColor:"#FF"+thisTheme.subBackgroundColor
                }
            }
            Row{
                width: parent.width-40
                height: 30
                anchors.horizontalCenter: parent.horizontalCenter
                spacing:10
                Text{
                    width:parent.width*0.15-40
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"序号"
                    color:thisTheme.fontColor
                }
                Text{
                    width:parent.width*0.3
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"歌名"
                    color:thisTheme.fontColor
                }
                Text{
                    width:parent.width*0.25
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"作者"
                    color:thisTheme.fontColor
                }
                Text{
                    width:parent.width*0.2
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"专辑"
                    color:thisTheme.fontColor
                }
                Text{
                    width:parent.width*0.1
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalAlignment: Text.AlignLeft
                    font.weight: 2
                    font.pointSize: musicPlayListDetail.fontSize
                    elide: Text.ElideRight
                    text:"时长"
                    color:thisTheme.fontColor
                }
            }
        }
    }
    model:10
    delegate: Rectangle{
        width:musicPlayListDetail.width-80
        height:80
        onParentChanged: {
            if(parent!=null){
                anchors.horizontalCenter=parent.horizontalCenter
            }
        }
        Row{
            width: parent.width-20
            height: parent.height-20
            anchors.centerIn: parent
            spacing:10
            Text{
                width:parent.width*0.15-40
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:"序号"
                color:thisTheme.fontColor
            }
            Text{
                width:parent.width*0.3
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:"歌名"
                color:thisTheme.fontColor
            }
            Text{
                width:parent.width*0.25
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:"作者"
                color:thisTheme.fontColor
            }
            Text{
                width:parent.width*0.2
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:"专辑"
                color:thisTheme.fontColor
            }
            Text{
                width:parent.width*0.1
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.weight: 2
                font.pointSize: musicPlayListDetail.fontSize
                elide: Text.ElideRight
                text:"时长"
                color:thisTheme.fontColor
            }
        }
    }

    Text{
        text:"歌单详情页"
    }
}
